<template>
    <div>
        <yh-dialog
            :visible.sync="operateDecordShow"
            width="900px"
            drag
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="cancel"
        >
            <template slot="title">
                <span id="title1">操作记录</span>
                <span id="title2"
                    >查询路径:{{ (poolNames[currentData.issueGroupCategory] || '全部池子') + '->' + (currentData.isGrName || '全部机构') }}</span
                >
                <span id="title3">
                    <el-input v-model="queryParam.issueName" placeholder="机构名称" size="mini" style="width:220px">
                        <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="selectByIssueName"></i>
                    </el-input>
                </span>
            </template>
            <vxe-table
                border
                height="400"
                :row-config="{ isHover: true }"
                :filter-config="{ remote: true, iconNone: 'el-icon-search', iconMatch: 'el-icon-search' }"
                @filter-change="filterChangeEvent"
                :data="tableData"
                v-loading="loading"
                @cell-click="cellClick"
                show-overflow="tooltip"
            >
                <vxe-column type="seq" width="60" title="序号"></vxe-column>
                <vxe-column
                    v-for="item in columns"
                    :field="item.field"
                    :title="item.title"
                    :key="item.field"
                    :min-width="item.minWidth || '100'"
                    align="center"
                >
                    <!-- :filters="item.filters" -->
                    <template #filter="{ $panel, column }">
                        <div>
                            <el-input
                                ref="searchInput"
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <span v-if="item.type == 'status'">
                            {{ item.statusKV[scope.row[item.field]] }}
                        </span>
                        <span v-else-if="item.field == 'dtCtDate'">
                            {{ dateFormat(scope.row.dtCtDate) + '  ' + timeFormat(scope.row.dtCtTime) }}
                        </span>
                        <span v-else>
                            {{
                                scope.row[item.field] === 0 || (scope.row[item.field] && (scope.row[item.field] + '').trim())
                                    ? scope.row[item.field]
                                    : '--'
                            }}
                        </span>
                    </template></vxe-column
                >
            </vxe-table>
            <risk-pagination :paging="paging" @page-change="pageRet"></risk-pagination>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancel"> 取 消 </el-button>
                <el-button size="mini" type="primary" @click="confirm"> 确 定 </el-button>
            </div>
        </yh-dialog>
        <yh-dialog
            :visible.sync="recordDetailShow"
            width="700px"
            top="20vh"
            drag
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="cancelDetail"
        >
            <template slot="title">
                <span id="title1">{{ operateTypeOptions[currentRow.operateType] + '详情' }}</span>
                <span id="title3">
                    <el-input v-model="queryDetailParam.issueName" placeholder="机构名称" size="mini" style="width:220px">
                        <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="selectDetailByIssueName"></i>
                    </el-input>
                </span>
            </template>
            <vxe-table
                border
                height="300"
                :row-config="{ isHover: true }"
                :data="detailTableData"
                v-loading="detailLoading"
                show-overflow="tooltip"
                :filter-config="{ remote: true, iconNone: 'el-icon-search', iconMatch: 'el-icon-search' }"
                @filter-change="filterChangeEventDetail"
            >
                <vxe-column type="seq" width="60" title="序号"></vxe-column>
                <vxe-column
                    v-for="item in detailColumns"
                    :field="item.field"
                    :title="item.title"
                    :key="item.field"
                    :min-width="item.minWidth || '100'"
                    align="center"
                >
                    <!-- :filters="item.filters" -->
                    <template #filter="{ $panel, column }">
                        <div>
                            <el-input
                                ref="searchInput"
                                class="my-input"
                                type="type"
                                v-for="(option, index) in column.filters"
                                :key="index"
                                v-model="option.data"
                                @input="$panel.changeOption($event, !!option.data, option)"
                            />
                        </div>
                    </template>
                </vxe-column>
            </vxe-table>
            <RiskPagination :paging="detailPaging" @page-change="detailPageRet"></RiskPagination>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancelDetail"> 取 消 </el-button>
                <el-button size="mini" type="primary" @click="confirmRecordDetail"> 确 定 </el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import RiskPagination from '@/common/components/risk-pagination.vue';
import { dateFormat, getCurrentPageData, timeFormat } from '@/utils/tools';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { poolDetailLogByDetailId, poolLogSelect } from '../api/related-mng';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'OperatedRecord',
    components: {
        RiskPagination,
    },
})
/**
 * currentData:当前池或当前行的信息
 * operateDecordShow：是否显示弹框
 */
export default class OperatedRecord extends Vue {
    @Prop() operateDecordShow: boolean;

    @Prop() currentData: any;

    dateFormat = dateFormat;
    timeFormat = timeFormat;
    recordDetailShow: boolean = false;
    detailTableData: any[] = []; // 详情日志
    detailTableDataAll: any[] = []; // 详情所有数据
    filterData: any[] = []; // 详情过滤数据

    currentRow: any = {}; // 点击详情行
    tableData: any[] = [];
    loading: boolean = false;
    queryParam = {
        groupCode: '',
        issueGroupCategory: '',
        issueName: '',
        operateId: 0,
        operateType: '',
    };

    queryDetailParam = {
        issueName: '',
    };
    poolNames = {
        '1': '托管人池',
        '2': '管理人池',
        '3': '董监高池',
    };
    operateTypeOptions = {
        '1': '新增',
        '2': '修改',
        '3': '删除',
        '4': '追加导入',
        '5': '覆盖导入',
        '6': '编辑池子',
    };
    columns = [
        {
            field: 'operateType',
            title: '操作事件',
            type: 'status',
            statusKV: this.operateTypeOptions,
            filters: [{ data: '' }],
        },
        {
            field: 'issueGroupCategory',
            title: '池子类型',
            type: 'status',
            statusKV: this.poolNames,
            filters: [{ data: '' }],
        },
        {
            field: 'groupName',
            title: '池子名称',
            filters: [{ data: '' }],
        },
        {
            field: 'dtCtDate',
            title: '变动时间',
            minWidth: '120',
            filters: [{ data: '' }],
        },
        {
            field: 'dtCtUser',
            title: '操作员',
            filters: [{ data: '' }],
        },
        {
            field: 'remark',
            title: '详情',
            minWidth: '140',
            filters: [{ data: '' }],
        },
    ];

    detailColumns = [
        {
            field: 'issueName',
            title: '机构名称',
            filters: [{ data: '' }],
        },
        {
            field: 'remark',
            title: '备注',
            minWidth: '120',
            filters: [{ data: '' }],
        },
    ];
    paging: pages = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
    };

    detailPaging: pages = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
    };

    mounted() {
        this.queryParam.groupCode = this.currentData.isGrCode || '';
        this.queryParam.issueGroupCategory = this.currentData.issueGroupCategory || '';
        this.getTableData();
    }

    // 表数据
    getTableData() {
        this.loading = true;
        poolLogSelect({
            ...this.queryParam,
            paging: {
                currentPage: this.paging.currentPage,
                pageSize: this.paging.pageSize,
            },
        })
            .then((res: any) => {
                this.tableData = res.list;
                this.paging.total = res.total;
                this.loading = false;
            })
            .catch(err => {
                console.log(err, 'err');
                this.loading = false;
            });
    }

    // 日志详情表
    getDetailTableData() {
        poolDetailLogByDetailId(this.currentRow.operateId)
            .then((res: any) => {
                this.detailTableDataAll = res;
                this.detailPageRet();
            })
            .catch(() => {});
    }

    // 分页
    pageRet() {
        this.getTableData();
    }

    // 分页
    detailPageRet() {
        let data = this.queryDetailParam.issueName ? this.filterData : this.detailTableDataAll;
        this.detailPaging.total = (data || []).length;
        this.detailTableData = getCurrentPageData(data, this.detailPaging.currentPage, this.detailPaging.pageSize);
    }

    cancelDetail() {
        this.recordDetailShow = false;
    }

    cancel() {
        this.$emit('operated-record');
    }

    confirm() {
        this.$emit('operated-record');
    }

    // 详情'确定'
    confirmRecordDetail() {
        //
        this.recordDetailShow = false;
    }

    // 机构名称搜索
    selectByIssueName() {
        this.getTableData();
    }

    // '详情'机构名称搜索
    selectDetailByIssueName() {
        this.filterData = this.detailTableDataAll.filter(item => item.issueName.indexOf(this.queryDetailParam.issueName) != -1);
        this.detailPaging.currentPage = 1;
        this.detailPageRet();
    }

    cellClick({ row, column }) {
        console.log(row, column);
        if (column.property == 'remark') {
            this.currentRow = row;
            // 1是 0否
            if (row.hasDetail == '1') {
                this.recordDetailShow = true;
                this.getDetailTableData();
            }
        } else {
        }
    }

    // 过滤
    filterChangeEvent(obj) {
        console.log(obj, 'filterChangeEvent');
        let queryKeys = {};
        obj.filterList.forEach(item => {
            queryKeys[item.property] = item.datas[0];
        });
        console.log(obj, 'obj');
    }

    // 详情过滤
    filterChangeEventDetail(obj) {}
}
</script>
<style lang="scss" scoped>
#title1 {
    font-weight: bolder;
    font-size: 14px;
}
#title2 {
    font-weight: normal;
    font-size: 14px;
    margin-left: 12px;
    color: #ccc;
}
#title3 {
    margin-left: 6px;
}
</style>
